<template>
  <div>
    <div id="map" class="map"></div>
  </div>
</template>
	<script>
import Vectors from 'ol/layer/Vector.js'
import { WMTS, Vector } from 'ol/source.js'
import Feature from 'ol/Feature'
import OlGeomPoint from 'ol/geom/Point'
import OlStyleStyle from 'ol/style/Style'
import OlStyleIcon from 'ol/style/Icon'
import Text from 'ol/style/Text' 
import Fill from 'ol/style/Fill'


let extent = [0, 0, 1200, 800];
let projection = new Projection({
  code: "xkcd-image",
  units: "pixels",
  extent: extent,
});

export default {
  data() {
    return {
      map: {},
    };
  },

  mounted() {
    this.initMap();
  },
  created(){},

  methods: {
    initdata(){},
    initMap() {
      this.map = new Map({
        layers: [
          new ImageLayer({
            source: new Static({
              attributions: '© <a href="http://xkcd.com/license.html">xkcd</a>',
              url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg2.duote.com%2Fduoteimg%2FzixunImg%2Flocal%2F2012%2F04%2F18%2F13347122271566.png&refer=http%3A%2F%2Fimg2.duote.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621059558&t=f87942b75d4fa4be82e902259c7c0315",
              projection: projection,
              imageExtent: extent,
            }),
          }),
        ],
        target: "map",
       
        view: new View({
          projection: projection,
          center: getCenter(extent),
          zoom: 1,
          maxZoom: 4,
          minZoom: 1,
        }),
      });
    },
  },
};
</script>
	<style>
.map {
  width: 100%;
  height: 400px;
}
</style>
